import { Meta, StoryObj } from "@storybook/react/*";
import Alert from "./alert";
import { fn } from "@storybook/test";
import { useState } from "react";
import Button from "../Button/button";

const meta:Meta<typeof Alert> = {
    title:'Alert 警告提示',
    component:Alert,
    parameters:{
        layout:'centered'
    },
    tags:['autodocs'],
    argTypes:{
        type: {
            type:'string',
            control:'radio',
            options:['primary','success','warning','danger','info'],
            description:'警告提示的样式类型'
        },
        message: {
            type:'string',
            control:'text',
            description:'警告提示的内容'
        },
        description:{
            type:'string',
            control:'text',
            description:'警告提示的辅助性文字介绍'
        },
        closable:{
            type:'boolean',
            control:'boolean',
            description:'是否显示关闭按钮'
        },
        showIcon:{
            type:'boolean',
            control:'boolean',
            description:'是否显示辅助图标'
        },
    },
    args: { onClose: fn() },
}

export default meta;

type Story = StoryObj<typeof meta>

export const DefaultAlert:Story = {
    args:{
        type:'primary',
        message:'Alert'
    }
}
DefaultAlert.storyName = '默认的警告提示'

export const AlertType:Story = {
    args: {
        type: 'primary',
        message: 'Alert'
    },
    render:(args) => (
        <>
            <Alert { ...args } type="primary" message="Alert"></Alert>
            <Alert { ...args }  type="danger" message="Alert"></Alert>
            <Alert { ...args }  type="info" message="Alert"></Alert>
            <Alert { ...args }  type="success" message="Alert"></Alert>
            <Alert { ...args }  type="warning" message="Alert"></Alert>
        </>
    )
    
}
AlertType.storyName = '不同类型的警告提示'

export const AlertClose:Story = {
    args: {
        type: 'primary',
        message: 'Alert'
    },
    render:(args) => (
        <>
            <Alert { ...args } type="primary" message="Alert" closable></Alert>
        </>
    )
    
}
AlertClose.storyName = '可关闭警告提示'

export const AlertDescription:Story = {
    args: {
        type: 'primary',
        message: 'Alert'
    },
    render:(args) => (
        <>
            <Alert { ...args } type="primary" message="Alert" description="描述: primary description" closable></Alert>
        </>
    )
    
}
AlertDescription.storyName = '含有辅助性文字介绍的警告提示。'


export const AlertIcon:Story = {
    args: {
        type: 'primary',
        message: 'Alert'
    },
    render:(args) => (
        <>
            <Alert { ...args } showIcon type="primary" message="Alert"></Alert>
            <Alert { ...args } showIcon type="danger" message="Alert"></Alert>
            <Alert { ...args } showIcon type="info" message="Alert"></Alert>
            <Alert { ...args } showIcon type="success" message="Alert"></Alert>
            <Alert { ...args } showIcon type="warning" message="Alert"></Alert>
        </>
    )
    
}
AlertIcon.storyName = '含有不同类型图标的警告提示'

export const AlertUnMonut:Story = {
    args: {
        type: 'primary',
        message: 'Alert'
    },
    render:(args) => {
        const [visible,setVisible] = useState(true)
        const handleClose = () => {
            setVisible(false);
          };
        return (
            <>
                {
                    visible && <Alert { ...args } onClose={handleClose} closable showIcon type="primary" message="Alert"></Alert>
                }
                <Button onClick={() => setVisible(true)} disabled={visible}>点击显示</Button>
            </>
        )
    }
    
}
AlertUnMonut.storyName = '警告提示的平滑卸载(动画暂时失效)'

